<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<nz-layout style="margin: -24px -24px 16px;">
  <nz-layout class="inner-layout">
    <div id="experimentOuter">
      <nz-breadcrumb>
        <nz-breadcrumb-item>
          <!--<a [routerLink]="['/', 'workbench', 'home']">Home</a>-->
          <a>Home</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          <a [routerLink]="['/', 'workbench', 'experiment']" (click)="isInfo = false">experiment</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item *ngIf="isInfo == true">
          {{ experimentID }}
        </nz-breadcrumb-item>
      </nz-breadcrumb>
      <div *ngIf="isInfo == false">
        <br />
        <h2>Experiment</h2>
        <nz-content>A experiment is a way of running a adhoc, pre-defined or pipeline on a scheduled basis.</nz-content>
      </div>
      <br />
    </div>
  </nz-layout>
  <div id="experimentData">
    <div *ngIf="isInfo == false">
      <div align="right">
        <nz-radio-group [(ngModel)]="showExperiment" (ngModelChange)="showChange()">
          <label nz-radio-button nzValue="All">All</label>
          <label nz-radio-button nzValue="Own">Owned By Me</label>
          <label nz-radio-button nzValue="Access">Accessible By Me</label>
        </nz-radio-group>
        <nz-input-group
          nzSearch
          style="width: 300px; margin-top: 15px; margin-left: 10px; margin-right: 5px;"
          [nzAddOnAfter]="suffixIconButton"
        >
          <input type="text" nz-input placeholder="input search text" />
        </nz-input-group>
        <ng-template #suffixIconButton>
          <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
        </ng-template>

        <button
          nz-button
          id="openExperiment"
          nzType="primary"
          style="margin-right: 5px; margin-bottom: 15px; margin-top: 15px;"
          (click)="initModal('create')"
        >
          <i nz-icon nzType="plus"></i>
          New Experiment
        </button>
        <button
          nz-button
          nzType="primary"
          style="margin-bottom: 15px; margin-top: 15px;"
          nz-popconfirm
          nzTitle="Confirm to delete?"
          nzCancelText="Cancel"
          nzOkText="Ok"
          (nzOnConfirm)="deleteExperiments()"
        >
          Delete
        </button>
      </div>
      <nz-table
        id="releaseTable"
        nzBordered
        #basicTable
        [nzData]="experimentList"
        [nzNoResult]="'No data'"
        nzSize="small"
      >
        <thead>
          <tr>
            <th>
              <label nz-checkbox [(ngModel)]="selectAllChecked" (ngModelChange)="selectAll()"></label>
            </th>
            <th>Experiment Name</th>
            <th>Experiment ID</th>
            <th>Status</th>
            <th>Finished Time</th>
            <th>Created Time</th>
            <th>Running Time</th>
            <th>Duration</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data; let i = index">
            <td>
              <label nz-checkbox [(ngModel)]="checkedList[i]"></label>
            </td>
            <td>{{ data.name }}</td>
            <td>
              <a [routerLink]="['info', data.experimentId]" (click)="experimentID = data.experimentId; isInfo = true">
                {{ data.experimentId }}
              </a>
            </td>
            <td>
              <nz-tag [nzColor]="statusColor[data.status]">{{ data.status }}</nz-tag>
            </td>
            <td>{{ data.finishedTime | date: 'M/d/yyyy, h:mm a' }}</td>
            <td>{{ data.createdTime | date: 'M/d/yyyy, h:mm a' }}</td>
            <td>{{ data.runningTime | date: 'M/d/yyyy, h:mm a' }}</td>
            <td>{{ data.duration }}</td>
            <td class="td-action">
              <a (click)="initModal('clone', 'customized', null, data.spec)">Clone</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="initModal('update', 'customized', data.experimentId, data.spec)">Update</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a
                nz-popconfirm
                nzPlacement="left"
                nzTitle="Confirm to delete?"
                nzCancelText="Cancel"
                nzOkText="Ok"
                (nzOnConfirm)="onDeleteExperiment(data.experimentId, true)"
              >
                Delete
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <router-outlet (experimentInfoChange)="isInfo = true"></router-outlet>
  </div>
  <nz-modal
    [(nzVisible)]="modalProps.isVisible"
    nzTitle="Create Experiment"
    (nzOnCancel)="closeModal()"
    [nzWidth]="1000"
  >
    <nz-button-group id="form-type-container" *ngIf="!modalProps.formType">
      <button nz-button nzType="primary" id="customized" (click)="modalProps.formType = 'customized'">
        Define your experiment
      </button>
      <button nz-button nzType="primary" id="pre" (click)="modalProps.formtype = 'predefined'" [disabled]="true">
        From predefined experiment library
      </button>
    </nz-button-group>
    <div *nzModalFooter>
      <button nz-button nzType="default" (click)="closeModal()">Cancel</button>
      <button
        id="go"
        nz-button
        nzType="primary"
        *ngIf="modalProps.formType"
        [disabled]="nextBtnDisable"
        (click)="proceedForm()"
      >
        {{ modalProps.okText }}
      </button>
      <button *ngIf="modalProps.currentStep > 0" nz-button nzType="default" style="float: left;" (click)="prevForm()">
        Prev Step
      </button>
    </div>
    <submarine-experiment-customized-form
      [mode]="mode"
      [targetId]="targetId"
      [targetSpec]="targetSpec"
      *ngIf="this.modalProps.formType === 'customized'"
    ></submarine-experiment-customized-form>
  </nz-modal>
</nz-layout>
